/* ================================================================================ 
   =====                            CSS STYLES FOR                            ===== 
   =====                            CUSTOM ELEMENTS                           ===== 
   ================================================================================ */


/* BIG BANNER - 2SXC  */
.BigBanner {position: relative; max-height:42vh;}
.BigBannerImages { height: 500px; position: relative; z-index: 1; }
.BigBannerImage { width: 100%; height: 100%; background-size: cover; background-position: center center;}
    
.BigBannerContent { width: 100%; padding: 20px 60px;  background-color: rgba(255,255,255,0.7); position: absolute; left: 0; bottom: 0; z-index: 1; box-sizing: border-box; }
.BigBannerContent.Gecentreerd { text-align: center;}
.BigBannerContent.Rechts { text-align: right;}

.BigBannerTitle { font-size: 32px; line-height: 1.3; color: #1F6AF4;}
.BigBannerText { margin: 10px 0; font-size: 18px;}
a.BigBannerLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; transition: all .3s ease; }
a.BigBannerLink:hover { text-decoration: none; background-color: #1F6AF4 }

.BigBannerControlButton { width: 36px; height: 36px; padding: 0; line-height: 36px; text-align: center; position: absolute; z-index: 3; color: #ffffff; background-color: #440381; opacity: 0.5; border: none;  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:20px; box-sizing: border-box; transition: all 0.3s ease; cursor: pointer;outline: none;}
.BigBannerControlButton:hover { opacity: 0.8; }

.BigBannerControlButton.Previous{ bottom: 20px; left: 20px; padding-right: 2px;}
.BigBannerControlButton.Previous:before{  content: "\f053";  }
.BigBannerControlButton.Next{ bottom: 20px; right: 20px; padding-left: 2px;}
.BigBannerControlButton.Next:before{  content: "\f054";  }                



/* SMALL BANNER - 2SXC  */
.SmallBanner { position: relative;}
.SmallBannerItems { height: 300px; position: relative; z-index: 1;  }
.SmallBannerItem { width: 100%; height: 100%; padding: 30px 0; position: relative;box-sizing: border-box;  background-color: #EC368D;  }
.SmallBannerImage{position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: #EC368D; background-size: cover; background-position: center center; opacity: 0.2;  }
.SmallBannerContent { position: relative; z-index: 2; padding: 0 60px; text-align: center; height: 100%; }
.SmallBannerContent .InnerWrapper { position: relative; z-index: 2; height: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; align-content: center;}
.SmallBannerContent .SmallBannerItemText { width: 100%;  margin: 0 0 20px 0; padding: 0 50px;  font-size: 36px; color: #ffffff; box-sizing: border-box;}
.SmallBannerContent .SmallBannerItemLink { display: inline-block; margin: 0 auto; padding: 5px 15px; color: #ffffff; background-color: #1F6AF4; transition: all .3s ease; }
.SmallBannerContent .SmallBannerItemLink:hover { text-decoration: none;background-color: #440381;  }

.SmallBannerControlButton { width: 36px; height: 36px; padding: 0; line-height: 36px; text-align: center; position: absolute; z-index: 3; color: #141414; background-color: #ffffff; opacity: 0.5; border: none;  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size:20px; box-sizing: border-box; transition: all 0.3s ease; cursor: pointer; transform: translateY(-50%); outline: none; }
.SmallBannerControlButton:hover { opacity: 0.8; }
.SmallBannerControlButton.Previous{ top: 50%; left: 20px; padding-right: 2px;}
.SmallBannerControlButton.Previous:before{  content: "\f053";  }
.SmallBannerControlButton.Next{ top: 50%; right: 20px; padding-left: 2px;}
.SmallBannerControlButton.Next:before{  content: "\f054";  }                



/* ==== MEDEWERKERS LIJST (BASIS) ==== */      
   
.Medewerkerslijst {}

.Medewerkerslijst .MedewerkerslijstItems { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.Medewerkerslijst .MedewerkerslijstItem {list-style-type: none; width: 30%; margin: 20px 0; text-align: center; }
.Medewerkerslijst .MedewerkerslijstItem .MedewerkerslijstItemImage { width: 140px; height: 140px; margin: 0 auto 20px auto; background-color: #eee; background-size: cover; background-position: center center; }
.Medewerkerslijst .MedewerkerslijstItem .MedewerkerslijstItemContent { }
.Medewerkerslijst .MedewerkerslijstItem .MedewerkerslijstItemContentName{ font-weight: bold; }
.Medewerkerslijst .MedewerkerslijstItem .MedewerkerslijstItemContentText1 { }
.Medewerkerslijst .MedewerkerslijstItem .MedewerkerslijstItemContentText2 { }

.Medewerkerslijst.Rounded .MedewerkerslijstItemImage{ border-radius: 20px; }
.Medewerkerslijst.Circle .MedewerkerslijstItemImage { border-radius: 50%; }


   
/* ==== SCHOOLWIKI (BASIS) ==== */      

/* INTRO */
.SchoolWiki{}
.SchoolWiki .SchoolWikiHeading {}
.SchoolWiki .SchoolWikiIntroText {}

/* SEARCH */
.SchoolWikiSearchWrapper { display: block; width: 100%; max-width: 400px; margin: 40px auto; padding: 10px 10px 20px 10px; background-color: #f3f5d7; border-radius: 10px; text-align: center;}
.SchoolWikiSearchWrapper .SchoolWikiSearchHeader { margin: 0 0 10px 0; font-size: 24px; color: #707173;}
.SchoolWikiSearchWrapper .SchoolWikiSearchContent { margin: 0 0 10px 0;}
.SchoolWikiSearchWrapper .SchoolWikiSearchBox {}
.SchoolWikiSearchWrapper .SchoolWikiSearchBox .SchoolWikiSearchInput { height: 30px; line-height: 30px; margin: 0 10px 0 0; padding: 0 10px; border: none; border-radius: 5px;}
.SchoolWikiSearchWrapper .SchoolWikiSearchBox .SchoolWikiSearchSubmit {height: 30px; line-height: 30px; margin: 0; padding: 0 10px; color: #ffffff; background-color: #C8D200; border: none; border-radius: 5px;}
.SchoolWikiSearchWrapper .SchoolWikiSearchBox .SchoolWikiSearchSubmit:hover {  background-color: #707173;}


/* CATEGORIES */ 
.WikiCategories {  }

.WikiCategories #icr_sidebar { display: block;}
.WikiCategories .sb_categorieslist { margin: 0; padding: 0;}
.WikiCategories .sb_categorieslist:before { content: "Hoofdstukken"; display:block; margin: 0 0 10px 0; font-size: 24px; color: #C8D200;}
.WikiCategories .sb_categorieslist .NavBlockTitle { display: none; }

.WikiCategories .sb_categorieslist .pm_block_normallist { width: 100%; margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;  }
.WikiCategories .sb_categorieslist .pm_block_normallist li { display: block; width: 48%; margin: 0 0 10px 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
.WikiCategories .sb_categorieslist .navBlockItemLink li:hover { text-decoration: none; }

.WikiCategories .sb_categorieslist li a.navBlockItemLink { display: block; padding: 5px 10px; background-color: #f3f5d7; border-radius: 5px; color: #444 !important; }
.WikiCategories .sb_categorieslist li:hover a.navBlockItemLink:hover { text-decoration: none; color: #ffffff!important; background-color: #C8D200;}

/*
.WikiCategories .sb_categorieslist a#linkBack  { display: inline-block; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; color: #ffffff !important; background-color: #C8D200;  border-radius: 5px;}
.WikiCategories .sb_categorieslist a#linkBack:hover {  background-color: #707173;}
*/

.WikiCategories .sb_searchinputbox  { display: none;}

/* LIST */
.WikiList{}
.WikiList .WikiBackToMain {display: inline-block; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; color: #ffffff !important; background-color: #C8D200;  border-radius: 5px;}
.WikiList .WikiBackToMain:hover { text-decoration: none; background-color: #707173;}

.WikiList .WikiListTitle { font-size: 32px; font-weight: bold;}

.WikiList .WikiListItems{}
.WikiList .WikiListItems .WikiListItem { display: block; margin: 0 0 20px 0; } 
.WikiList .WikiListItems .WikiListItem .WikiTitle { font-size: 20px; }
.WikiList .WikiListItems .WikiListItem .WikiSummary { }
.WikiList .WikiListItems .WikiListItem .WikiMeta { margin-top: 3px; padding-top: 3px; font-size: 12px; font-style: italic; color: #cccccc; border-top: 1px solid #f3f5d7;}

/* DETAILS */
.WikiDetails .WikiBack {display: inline-block; height: 30px; line-height: 30px; margin: 0; padding: 0 10px; color: #ffffff !important; background-color: #C8D200;  border-radius: 5px;}
.WikiDetails .WikiBack:hover { text-decoration: none; background-color: #707173;}

/* VIEWER */ 
.WikiViewer { overflow: hidden; }
.WikiViewerHeader { margin: 0 0 10px 0; font-size: 24px; color: #C8D200;}
.WikiViewerContent { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;  }
.WikiViewerContent a.WikiViewerItem { display: block; width: 48%; margin: 0 0 10px 0; padding: 5px 10px; color: #444 !important;  background-color: #f3f5d7; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.WikiViewerContent a.WikiViewerItem:hover { text-decoration: none; color: #ffffff!important; background-color: #C8D200;}

/* sexy content module */
.sc-content-block-menu { display:none !important}
.sc-menu { position:relative;}


/* ======================
     VIDEO - 2SXC 
=======================*/

/* single item */
.VideoSingleItem { margin: 0 0 40px 0; }
.VideoSingleItem .VideoItemTitle {}
.VideoSingleItem .VideoLink { display: block; width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; position: relative; background-size: cover; background-position: center; text-decoration:none;}
.VideoSingleItem .VideoLink:before { content: "\f167"; display: inline-block; font-family: 'Font Awesome 5 Brands'; font-weight: 400; font-size:72px; line-height: 1; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 10px rgba(0,0,0,0.5); transition: all 0.3s ease;}
.VideoSingleItem .VideoLink:hover:before { transform: scale(1.1); }
.VideoSingleItem .VideoLink:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: #000; opacity: 0.1; transition: all 0.3s ease; }
.VideoSingleItem .VideoLink:hover:after { opacity: 0; }

/* list */
.VideoLijst { margin: 0 0 40px 0; overflow: hidden; }
.VideoLijstItems { display: flex; justify-content: space-between; flex-wrap: wrap; }
.VideoLijstItem { width: calc(50% - 20px); margin: 0 0 40px 0; }
.VideoLijstItem .VideoLink { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 200px; background-color: #eee; background-size: cover; background-position: center; overflow: hidden;  }
.VideoLijstItem .VideoLink:before { content: "\f167"; display: inline-block; font-family: 'Font Awesome 5 Brands'; font-weight: 400; font-size:48px; line-height: 1; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 5px rgba(0,0,0,0.4); transition: all 0.3s ease; }
.VideoLijstItem .VideoLink:hover:before { transform: translateY(-50%); }

.VideoLijstItem .VideoLink .VideoTitle { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #ffffff; background-color: rgba(0,0,0,0.5); position: absolute;bottom: -100px; left: 0; transition: all 0.3s ease;  }
.VideoLijstItem .VideoLink:hover .VideoTitle {bottom: 0;   }

/*  slider */
.VideoSlider { margin: 0 0 40px 0; overflow: hidden; }
.VideoSliderItems { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 -20px; }
.VideoSliderItem { width: 50%; padding: 0 20px; box-sizing: border-box; }
.VideoSliderItem .VideoLink { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 200px; background-color: #eee; background-size: cover; background-position: center; overflow: hidden; }
.VideoSliderItem .VideoLink:before { content: "\f167"; display: inline-block; font-family: 'Font Awesome 5 Brands'; font-weight: 400; font-size:48px; line-height: 1; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 5px rgba(0,0,0,0.4); transition: all 0.3s ease; }
.VideoSliderItem .VideoLink:hover:before { transform: translateY(-50%); }

.VideoSliderItem .VideoLink .VideoTitle { width: 100%; padding: 5px 10px; box-sizing: border-box; color: #ffffff; background-color: rgba(0,0,0,0.5); position: absolute;bottom: -100px; left: 0; transition: all 0.3s ease;  }
.VideoSliderItem .VideoLink:hover .VideoTitle {bottom: 0;   }

.VideoSliderItems.flickity-enabled { display: block;}
.VideoSliderItems .flickity-prev-next-button { top: 10px; width: 40px; height: 40px; transform: none; }
.VideoSliderItems .flickity-prev-next-button.previous { left: 20px; }
.VideoSliderItems .flickity-prev-next-button.next { right: 20px; }
   
 /* ================================================================================ 
                               HEUTINK SCHOOLWAPPS CALENDAR 
   ================================================================================ */
.digicom-module-title {display:none;}

/* CALENDAR WRAPPER */
.digicom-module-title { color : #009240;}
.sw-calendar { font-family: 'Exo', sans-serif; }
.sw-calendar.upcoming { }
.sw-calendar.month { }
 
/* CALENDAR HEADER */
.sw-calendar-header { display: flex; justify-content: space-between; margin: 0 0 20px 0; padding: 10px 0; border-bottom: 2px solid #ccc; }
.sw-calendar-title { margin:20px 0; font-size: 20px; font-weight: 700; color: #009240;}
.sw-calendar-button { }
.sw-calendar-button.previous {}
.sw-calendar-button.next {}
 
/* CALENDAR ITEMS */
.sw-calendar-items { font-family: 'Exo', sans-serif; }
.sw-calendar-item { margin: 0 0 20px 0; padding: 0 0 20px 0; }
.sw-calendar-item:last-of-type { margin:0px; padding: 0px; }
 
.sw-calendar-item-dates { display: flex; justify-content: flex-start;}
.sw-calendar-item-date { font-weight: 700; text-transform:uppercase }
.sw-calendar-item-date.startdate {}
.sw-calendar-item-date.enddate { }
.sw-calendar-item-date.enddate:before { content: "-"; display:inline-block; margin: 0 5px 0 10px; }
.sw-calendar-item-date-name {}
.sw-calendar-item-date-day {}
.sw-calendar-item-date-month {}
.sw-calendar-item-date-time {}
 
.sw-calendar-item-title { color:#009240; font-size: 22px; font-weight: 700;}
.sw-calendar-item-description {margin: 0 0 5px 0; }
.sw-calendar-item-groups { }
.sw-calendar-item-groups span { display: inline-block; line-height: 1; margin: 0 2px 4px 0; padding: 4px 8px; border-radius: 12px; border: 1px solid #aaa; font-size: 12px; }
/*
.sw-calendar-item-groups span:before { content: ", "; }
.sw-calendar-item-groups span:first-child:before { content: none; }
*/
 
/* CALENDAR FOOTER */
.sw-calendar-footer { margin: 20px 0 0 0; padding: 10px 0; }
.sw-calendar-list-link,
.sw-calendar-button{
	display: inline-block;
    color: #fff !important;
    background-color:#009240;
    padding: 0 15px;
    font-weight: 700;
    height: 32px;
    line-height: 33px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    text-transform: uppercase;
    margin: 15px 0;
}

 /* ================================================================================ 
                                === DIGICOM TIMELINE ===  
   ================================================================================ */

/* general */
.sw-timeline { }
.sw-timeline-posts { }

.sw-timeline-post { display: flex; justify-content: flex-start; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid #eee;}

.sw-timeline-post .post-images { }
.sw-timeline-post .post-thumbnail-image { display: inline-block; width: 100px; height: 100px; margin: 0 20px 0 0; position: relative; background-size: cover; background-position: center center; }
.sw-timeline-post .post-thumbnail-image .post-thumbnail-image-overlay  { display: block; position: absolute; bottom: 0; right: 0;  width: 100%; height: 100%; z-index: 5; background-size: cover; background-position: bottom right; background-repeat: no-repeat; }

.sw-timeline-post .post-content {  }
.sw-timeline-post .post-content .post-title{ font-size: 18px; font-weight: 700; color: #000;}
.sw-timeline-post .post-content .post-author { font-size: 0.95em; margin: 5px 0; color: #aaa; }
.sw-timeline-post .post-content .post-author span { font-weight: 700; }
.sw-timeline-post .post-content .post-date { font-size: 0.95em; margin: 5px 0; color: #aaa;}
.sw-timeline-post .post-content .post-date span { font-weight: 700; }
.sw-timeline-post .post-content .post-message {  }


.sw-timeline-post .post-attachments {}
.sw-timeline-post .post-attachments .post-files {}
.sw-timeline-post .post-attachments .post-files .post-file {}
.sw-timeline-post .post-attachments .post-files .post-file a { display: block; padding: 2px 0 2px 10px; position: relative; }
.sw-timeline-post .post-attachments .post-files .post-file a:before { content: ""; display: block; width: 6px; height: 6px; position: absolute; top: 10px; left: 0; background-color: #888; }
.sw-timeline-post .post-attachments .post-files .post-file a:hover { }
 
 
  
/* list specific */  
.sw-timeline.list { }

.sw-timeline-footer { padding: 10px 0; text-align: center;}
.sw-timeline-footer .sw-timeline-page-number { display: inline-block; margin: 0 5px; padding: 4px 10px; }
.sw-timeline-footer .sw-timeline-button { display: inline-block;  padding: 4px 10px; background-color: #aaa; border-radius: 5px; }
.sw-timeline-footer .sw-timeline-button:hover { text-decoration: none; background-color: #888; }
.sw-timeline-footer .sw-timeline-button span {color: #fff;  }
  
/* recent specific */ 
.sw-timeline.recent { }
 
.sw-timeline.recent .sw-timeline-posts { display: flex; justify-content: space-between; margin: 0; padding: 0; flex-wrap: wrap; }
.sw-timeline.recent .sw-timeline-post { width: 22%; display:block; border:none;}
.sw-timeline.recent .sw-timeline-post .post-content .post-title {color:#000;}
.sw-timeline.recent .sw-timeline-post .post-thumbnail-image { display: block; width: 100%; height: 140px; margin: 0 0 10px 0; position: relative; background-size: cover; }
.sw-timeline.recent .sw-timeline-post .post-content { color:#000; padding: 5px 10px; max-height: 120px; overflow: hidden; position: relative; }
.sw-timeline.recent .sw-timeline-post .post-content:after { content: ""; display: block; width: 100%; height: 20px; position: absolute; bottom: 0; left: 0; 
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 }
 
.sw-timeline.recent .timeline-redirect-link  { padding: 10px 0; width: 100%; box-sizing: border-box; } 
.sw-timeline.recent .timeline-redirect-link .sw-timeline-list-link {display: inline-block;  background-color: #aaa; color: #fff; padding: 0 15px; font-weight: 700; height: 32px; line-height: 33px; border: 1px solid #aaa; cursor: pointer; text-transform: uppercase; margin: 15px 0;} 
.sw-timeline.recent .timeline-redirect-link .sw-timeline-list-link:hover { text-decoration: none; background-color: #fff; color:#aaa; }  
 


 
 
@media only screen and (max-width: 768px) {	

}

@media only screen and (max-width: 480px){

}